<template>
  <div>
    <div class="form">
      <p>充值金额</p>
      <van-cell-group inset>
        <van-field clearable label="￥" placeholder="请输入充值金额" v-model="formData.money" type="digit">
        </van-field>
      </van-cell-group>

    </div>
    <div class="payForm">
      <p>充值方式</p>
      <van-radio-group v-model="formData.checked" class="radio-warp">
        <van-cell-group inset>
          <van-cell title="支付宝支付" clickable @click="formData.checked = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
            <template #icon>
              <img src="../../../assets/image/alipay.png" alt="">
            </template>
          </van-cell>
          <van-cell title="微信支付" clickable @click="formData.checked = '2'" icon="wechat-pay">
            <template #right-icon>
              <van-radio name="2" />
            </template>
            <template #icon>
              <img src="../../../assets/image/weichat.png" alt="">
            </template>
          </van-cell>
          <van-cell title="银行卡支付" clickable @click="formData.checked = '3'" icon="paid">
            <template #right-icon>
              <van-radio name="3" />
            </template>
            <template #icon>
              <img src="../../../assets/image/bank.png" alt="">
            </template>
          </van-cell>
          <!-- <van-cell title="USDT" clickable @click="formData.checked = '4'" icon="paid">
            <template #right-icon>
              <van-radio name="4" />
            </template>
            <template #icon>
              <img src="../../../assets/image/USDT.png" alt="">
            </template>
          </van-cell> -->
        </van-cell-group>
      </van-radio-group>
    </div>
    <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="submit">立即充值</van-button>
    <van-overlay :show="formData.show" @click="formData.show = false">
      <div class="wrapper" @click.stop>
        <van-icon name="cross" class="close" @click="formData.show = false" />
        <h1>充值USDT</h1>
        <div class="qrcode-wrap">
          <div ref="qrCodeUrl" class="CodeUrl"></div>
        </div>
        <div class="p"> 此地址只可接收USDT</div>
        <div class="cont-warp">
          <van-row justify="space-between" class="item">
            <van-col span="12">
              <p>主网:</p>
            </van-col>
            <van-col span="12" class="right1">
              Tron（TRC20）
            </van-col>
          </van-row>
          <van-row justify="space-between" class="item">
            <van-col span="8" class="flex">
              钱包地址：
            </van-col>
            <van-col span="16" class="right" style=" margin-bottom: 10px;">
              <!-- {{user_info.transferUsdt}} -->
              ertertert
              <i class="iconfont icon-fuzhi1 " @click="copy" :data-clipboard-text="ertertert"></i>
            </van-col>
          </van-row>
          <van-row justify="space-between" class="item">
            <van-col span="12">
              最小充值数：
            </van-col>
            <van-col span="12" class="right1">
              {{ formData.mini }}
            </van-col>
          </van-row>
          <van-row justify="space-between" class="item">
            <van-col span="12">
              充值区块确认数
            </van-col>
            <van-col span="12" class="right1">
              50
            </van-col>
          </van-row>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { computed, ref, reactive, onMounted, nextTick } from 'vue'
import { useStore } from "vuex";
import { recharge, getRechargeProportion, alipay } from "@/api/public";
import { Dialog, Toast } from "vant";
import { useRouter } from 'vue-router'
import { stringNum, formatPhoneNumber } from "@/utils/phone";
import { getMinMoney } from "@/api/public";
// import QRCode from 'qrcodejs2'
import QRCode from 'qrcode2';
import Clipboard from 'clipboard';
import useClipboard from 'vue-clipboard3'
export default {
  setup(props) {
    const { toClipboard } = useClipboard()
    const store = useStore();
    const formData = reactive({
      checked: "1",
      loading: false,
      money: "",
      show: false,
      mini: ""
    })
    const qrCodeUrl = ref();
    const submit = () => {
      if (formData.checked != '1') {
        return Toast('暂未开放')
      }
      if (!formData.money) {
        return Toast('请输入金额')
      }
      formData.loading = true
      if (formData.checked == '4') {
        formData.show = true
        nextTick(() => {
          new QRCode(qrCodeUrl.value, {
            text: "545465",
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H,
          })
          getMinMoney().then(res => {
            formData.mini = res.data.message
            console.log(res.data.message, "mini")
          })
        })
        formData.loading = false
        return
      }
      const para = {
        rechargeAmount: formData.money
      }
      alipay(para).then(res => {
        console.log(res)
        if (res.data.success) {
          // Toast('充值成功')
          location.href = res.data.data
        } else {
          Toast(res.data.message)
        }
        formData.loading = false
      })
    }
    const copy = async () => {
      try {
        await toClipboard("store.getters.user_info.transferUsdt")
        Toast("复制成功")
      } catch (e) {
        console.error(e)
      }
    }
    onMounted(() => {

    })
    return {
      formData, submit, copy, qrCodeUrl
    }

  }
}
</script>
<style lang="less" scoped>
.wrapper {
  h1 {
    width: 100%;
    text-align: center;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    line-height: 30px;
  }

  position: relative;

  .close {
    position: absolute;
    color: #999;
    font-size: 50px;
    right: 30px;
  }

  margin: 300px 80px;
  background: #282a2c;
  border: 1px solid #999;
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.35);
  border-radius: 20px;
  padding: 30px;

  p {
    color: #fff;
  }

  .item {
    color: #fff;
    padding: 0px 10px;
    margin-top: 30px;
    align-items: center;
    font-size: 30px;

    .flex {
      display: inline-block;
      word-wrap: break-word;
      word-break: normal;

      span {
        display: inline-block;
        word-wrap: break-word;
        word-break: normal;
        line-height: 50px;
        width: 100%;
        color: #fff;
      }
    }

    .right1 {
      text-align: right;
      color: #fff;
    }

    .right {
      word-break: break-all;
      position: relative;
      text-align: left;
      color: #fff;

      .icon-fuzhi1 {
        bottom: -50px;
        position: absolute;
        font-size: 60px;
        color: #fff;
        right: -20px;
      }
    }
  }

  .p {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 30px;
  }

  .qrcode-wrap {
    background: white;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    z-index: 6;
    width: 268px;
    height: 268px;

    /deep/img {
      width: 260px;
      height: 260px;
    }

    .code {
      text-align: center;
      margin-bottom: 10px;
    }

    .CodeUrl {
      padding: 10px;
    }
  }
}

.block_gradual {
  margin-top: 120px;
  margin-left: 30px;
  width: 682px;
  height: 92px;
}

.payForm {
  padding: 20px;
  background: #282a2c;
  border: 1px solid #999;
  border-radius: 18px;
  margin: 0px 30px;

  &:deep(.van-cell-group) {
    background: transparent;
  }

  img {
    width: 10%;
    height: 10%;
    vertical-align: middle;
    margin-right: 20px;
  }

  &:deep(.van-cell) {
    padding: 0px;
    display: flex;
    align-items: center;
  }

  &:deep(.van-cell:after) {
    border-bottom: 0px;
  }

  &:deep(.van-cell__title) {
    font-size: 31px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 95px;
  }

  p {
    font-size: 30px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
  }

  &:deep(.van-radio__icon--checked > .van-icon) {
    color: #37dc6d !important;
    background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  &:deep(.van-cell) {
    background: #282a2c;
  }

  &:deep(.van-radio__icon--checked) {
    color: #37dc6d !important;
  }

  &:deep(.van-icon-success) {
    background: transparent;
    border-color: #37dc6d;
    opacity: 0.8;
  }
}

.form {
  height: 205px;
  background: #282a2c;
  border: 1px solid #999;
  border-radius: 18px;
  margin: 60px 30px 30px;
  padding: 30px;

  &:deep(.van-field__label) {
    color: #ffffff;
    width: fit-content;
  }

  &:deep(.van-field) {
    border-bottom: 1px solid #999;
    border-radius: 0px;
  }

  p {
    font-size: 30px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
  }

  &:deep(.van-cell-group) {
    background: transparent;
  }
}
</style>